<template>
  <div class="full">
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">党组织活动</div>
      </div>
    </div>
    <div class="flex-container-dj">
      <div class="flex-container-dj-box">
        <div class="flex-dj-container-h3">
          <div class="flex-dj-item">
            <div class="flex-dj-text1">
              <!-- 数字 -->
              <div class="dj-number">{{ rate0 }}</div>
              <div class="dj-text1">次</div>
              <!-- 文字 -->
            </div>
            <span class="dj-text2">{{ text1 }}总活动次数</span>
          </div>
          <div
            class="dj-h3"
            @mouseover="changeColor(11)"
            @mouseout="restoreColor(11)"
            @click="showPatyact"
            :style="{ cursor: cursorStyle1, color: textColor1 }"
          >
            党建活动 >
          </div>
          <el-dialog
            v-model="dialogVisible"
            :style="{
              '--el-dialog-padding-primary': '0.5rem',
              'background-image': 'url(src/assets/党员背景.png)',
              'background-size': '100% 100%',
              'background-repeat': ' no-repeat',
              'background-color': 'rgba(0, 0, 0, 0)',
              width: '75rem',
              height: '50rem',
              'text-align': 'center',
            }"
          >
            <template #header="{ titleId, titleClass }">
              <div class="my-header">
                <h4
                  :id="titleId"
                  :class="titleClass"
                  style="color: #ffffff"
                ></h4>
              </div>
            </template>
            <div class="backg">
              <div class="patyimg"><span>党建活动列表</span></div>
              <div class="backg-a">
                <div class="search-bar">
                  <label @click="cs">活动时间</label>
                  <!-- <input class="text1" type="text" v-model="searchText" @input="search" /> -->
                  <div class="datetimer">
                    <!-- <input class="timer-start" type="date" v-model="startDate" />
           <input class="timer-start" type="date" v-model="endDate" /> -->
                    <el-date-picker
                      v-model="value2"
                      type="daterange"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      popper-class="custom-datepicker"
                      format="YYYY-MM-DD"
                      :shortcuts="shortcuts"
                      :size="size"
                    />
                  </div>
                  <!-- <button class="search-b"></button> -->
                  <button class="search-c" @click="reset">重置</button>
                </div>
                <table class="table">
                  <thead>
                    <tr style="background-color: #f05e4b30">
                      <th>活动类型</th>
                      <th>活动地点</th>
                      <th>活动人数</th>
                      <th>活动时间</th>
                      <th>所属党支部</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      v-for="(item, index) in displayedData"
                      :key="index"
                      :class="index % 2 === 0 ? 'even' : 'odd'"
                    >
                      <td>{{ item.type }}</td>
                      <td>{{ item.address }}</td>
                      <td>{{ item.number }}</td>
                      <td>{{ item.activityTime }}</td>
                      <td>{{ item.organizationId }}</td>
                      <td><a @click="showDetail(index)">查看照片</a></td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="padd">
                <div class="total-count">共{{ totalCount }}条</div>
                <div class="pagination">
                  <span
                    v-if="currentPage > 1"
                    @click="changePage(currentPage - 1)"
                    >上一页</span
                  >
                  <!-- 显示第一页 -->
                  <span v-if="currentPage > 5" @click="changePage(1)">1</span>
                  <!-- 显示省略号 -->
                  <span v-if="currentPage > 5">...</span>
                  <!-- 根据当前页显示中间的页数 -->
                  <span
                    v-for="page in displayedPages"
                    :key="page"
                    :class="{ active: currentPage === page }"
                    @click="changePage(page)"
                    >{{ page }}</span
                  >
                  <!-- 显示省略号 -->
                  <span v-if="currentPage + 4 < totalPages">...</span>
                  <!-- 显示最后一页 -->
                  <span
                    v-if="currentPage + 4 < totalPages"
                    @click="changePage(totalPages)"
                    >{{ totalPages }}</span
                  >
                  <span
                    v-if="currentPage < totalPages"
                    @click="changePage(currentPage + 1)"
                    >下一页</span
                  >
                </div>
              </div>
              <!-- 显示详细信息的部分 -->
              <!-- <div v-if="selectedItem"> -->
              <div class="overlay" v-if="showOverlay" @click="hiddetails"></div>
              <div class="details" v-if="showDetails">
                <!-- 详情组件内容 -->
              </div>
              <!-- </div> -->
            </div>

            <!-- 其他详细信息内容 -->
          </el-dialog>
          <el-dialog
            v-model="dialogVisible2"
            :style="{
              '--el-dialog-padding-primary': '0.5rem',
              'background-image': 'url(src/assets/党员背景.png)',
              'background-size': '100% 100%',
              'background-repeat': ' no-repeat',
              'background-color': 'rgba(0, 0, 0, 0)',
              width: '75rem',
              height: '50rem',
              'text-align': 'center',
            }"
          >
            <template #header="{ titleId, titleClass }">
              <div class="my-header">
                <h4
                  :id="titleId"
                  :class="titleClass"
                  style="color: #ffffff"
                ></h4>
              </div>
            </template>
            <div class="backg">
              <div class="patyimg"><span>活动详情</span></div>
              <div class="backg-b">
                <div class="paty-item1">{{ selectedItem.type }}</div>
                <el-divider style="margin: 0.5rem; border-color: #ffffff15" />
                <div class="paty-item2">
                  <div class="paty-item2-1">
                    发生日期：{{ selectedItem.activityTime }}
                  </div>
                  <div class="paty-item2-2">{{ selectedItem.type }}</div>
                </div>
                <el-divider style="margin: 0.5rem; border-color: #ffffff15" />
                <div class="paty-item3">
                  <div class="paty-item3-1">
                    <div class="swiper3">
                      <swiper3 :images="images" class="swiper3-1" />
                    </div>
                    <div class="paty-item3-1-1">共{{ number1 }}张</div>
                  </div>
                  <div class="paty-item3-2">
                    <div>
                      <pre class="paty-item3-2-1" v-html="articleContent"></pre>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 显示详细信息的部分 -->
            </div>
            <!-- 其他详细信息内容 -->
          </el-dialog>
        </div>
      </div>
      <div class="dj">
        <div class="dj-boxitem">
          <div class="flex-dj-container">
            <div class="flex-dj-item">
              <!-- 图片 -->
              <img
                src="../assets/活动月均.png"
                style="width: 3.4rem; height: 3.3rem"
                alt="image"
                class="dj-image"
              />
            </div>
            <div class="flex-dj-item">
              <div class="flex-dj-text">
                <!-- 数字 -->
                <div class="dj-number">{{ rate1 }}</div>
                <div class="dj-text1">次</div>
                <!-- 文字 -->
              </div>
              <span class="dj-text2">{{ text1 }}月均活动次数</span>
            </div>
          </div>
          <div class="flex-dj-container">
            <div class="flex-dj-item">
              <!-- 图片 -->
              <img
                src="../assets/活动次数.png"
                style="width: 3.4rem; height: 3.3rem"
                alt="image"
                class="dj-image"
              />
            </div>
            <div class="flex-dj-item">
              <div class="flex-dj-text">
                <!-- 数字 -->
                <div class="dj-number">{{ rate2 }}</div>
                <div class="dj-text1">次</div>
                <!-- 文字 -->
              </div>
              <span class="dj-text2">{{ text2 }}活动次数</span>
            </div>
          </div>
        </div>
        <div class="dj-boxitem">
          <div class="flex-dj-container">
            <div class="flex-dj-item">
              <!-- 图片 -->
              <img
                src="../assets/活动类型.png"
                style="width: 3.4rem; height: 3.3rem"
                alt="image"
                class="dj-image"
              />
            </div>
            <div class="flex-dj-item">
              <div class="flex-dj-text">
                <!-- 数字 -->
                <div class="dj-number">{{ rate3 }}</div>
                <div class="dj-text1">类</div>
                <!-- 文字 -->
              </div>
              <span class="dj-text2">{{ text3 }}活动类型</span>
            </div>
          </div>
          <div class="flex-dj-container">
            <div class="flex-dj-item">
              <!-- 图片 -->
              <img
                src="../assets/活动人次.png"
                style="width: 3.4rem; height: 3.3rem"
                alt="image"
                class="dj-image"
              />
            </div>
            <div class="flex-dj-item">
              <div class="flex-dj-text">
                <!-- 数字 -->
                <div class="dj-number">{{ rate4 }}</div>
                <div class="dj-text1">次</div>
                <!-- 文字 -->
              </div>
              <span class="dj-text2">{{ text4 }}活动人次</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">活动类型分布</div>
      </div>
    </div>
    <div class="flex-container-dj">
      <v-chart id="chartdj1" class="chartdj1" :option="optiondj1" />
    </div>
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">活动趋势</div>
      </div>
    </div>
    <div class="flex-container-dj2">
      <v-chart id="chartdj2" class="chartdj2" :option="optiondj2" />
    </div>
  </div>
</template>

<script >
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
import axios from "axios";
import swiper3 from "../components/swiper3.vue";
import {
  getprofile,
  getpartymember,
  getpartyaction,
  getpartyorginaze,
} from "../reqeust/index";
export default {
  data() {
    return {
      data: [],
      partydata: [],
      showOverlay: false,
      showDetails: false,
      selectedItem: null,
      currentPage: 1,
      pageSize: 6,
      searchText: "",
      startDate: "", // 起始日期
      endDate: "", // 结束日期
      minDate: "2021-01-01", // 最小日期
      maxDate: "2025-12-31", // 最大日期
      value2: "",
      shortcuts: [],
      cursorStyle1: "default",
      textColor1: "white",
      dialogVisible: false,
      dialogVisible2: false,
      optiondj1: {},
      optiondj2: {},
      rate0: "",
      rate1: "",
      rate2: "",
      rate3: "",
      rate4: "",
      images: [
        { url: "src/assets/地球.png" },
        { url: "src/assets/活动人次.png" },
      ],
      articleContent: `
      这是一篇文章的内容
      包括了换行符
      当然也有各种标点符号和特殊字符
      这些都会在页面上显示，并且保留原来的格式`,
      number1: "",
    };
  },
  components: {
    swiper3,
  },
  setup() {},
  computed: {
    displayedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      console.log("a", this.filteredData.slice(start, end)[0]);
      return this.filteredData.slice(start, end).map((item) => ({
        type: item.title,
        address: item.address,
        number: item.number,
        photo: item.image,
        organizationId: this.getNameById(item.organizationId),
        activityTime: item.activityTime,
        memo: item.memo,
      }));
    },
    filteredData() {
      if (this.value2) {
        let date1 = new Date(this.value2[0]);
        let date2 = new Date(this.value2[1]);
        // 获取年份、月份和日期
        let year1 = date1.getFullYear();
        let month1 = (date1.getMonth() + 1).toString().padStart(2, "0"); // 加1处理月份
        let day1 = date1.getDate().toString().padStart(2, "0");
        let year2 = date2.getFullYear();
        let month2 = (date2.getMonth() + 1).toString().padStart(2, "0"); // 加1处理月份
        let day2 = date2.getDate().toString().padStart(2, "0");
        // 拼接年份、月份和日期
        let formattedDate1 = `${year1}-${month1}-${day1}`;
        let formattedDate2 = `${year2}-${month2}-${day2}`;

        this.startDate = formattedDate1;
        this.endDate = formattedDate2;

        console.log("1", this.value2, this.startDate, this.endDate);
        return this.data.filter((item) => {
          return (
            item.activityTime >= this.startDate &&
            item.activityTime <= this.endDate
          );
        });
      }
      return this.data;
    },
    totalCount() {
      return this.filteredData.length;
    },
    totalPages() {
      return Math.ceil(this.totalCount / this.pageSize);
    },
    displayedPages() {
      if (this.totalPages <= 10) {
        // 当总页数小于等于10时，显示全部页数
        return Array.from({ length: this.totalPages }, (_, i) => i + 1);
      } else if (this.currentPage <= 5) {
        // 当当前页数小于等于5时，显示前7页和最后一页
        return [1, 2, 3, 4, 5, 6, 7];
      } else if (this.currentPage >= this.totalPages - 4) {
        // 当当前页数大于等于总页数-4时，显示第一页和后7页
        return [
          this.totalPages - 6,
          this.totalPages - 5,
          this.totalPages - 4,
          this.totalPages - 3,
          this.totalPages - 2,
          this.totalPages - 1,
          this.totalPages,
        ];
      } else {
        // 其他情况下，显示当前页的前3页、当前页、当前页的后3页
        return [
          this.currentPage - 2,
          this.currentPage - 1,
          this.currentPage,
          this.currentPage + 1,
        ];
      }
    },
  },
  mounted() {
    const value2 = ref("");
    this.value2 = value2;
    const shortcuts = [
      {
        text: "最近一周",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          return [start, end];
        },
      },
      {
        text: "最近一个月",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          return [start, end];
        },
      },
      {
        text: "最近三个月",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          return [start, end];
        },
      },
    ];
    this.shortcuts = shortcuts;
    const promise = getpartyaction();
    promise.then((data) => {
      console.log("22", data);
      this.data = data.list;
      this.rate0 = data.total;
      this.rate1 = (this.rate0 / 12).toFixed(2);
    });
    const partyorganization = getpartyorginaze();
    partyorganization.then((partydata) => {
      console.log("33", partydata);
      this.partydata = partydata.list;
      this.rate3 = partydata.total;
    });
    this.getDataFromAPI();
  },
  methods: {
    //党员详情处理
    showPatyact() {
      this.dialogVisible = true;
    },
    getNameById(id) {
      const foundItem = this.partydata.find((item) => item.id === id);
      return foundItem ? foundItem.name : "";
    },
    changePage(page) {
      this.currentPage = page;
    },
    search() {
      this.currentPage = 1;
    },
    showDetail(index) {
      // 在点击详情时更新selectedItem属性
      this.selectedItem = this.displayedData[index];
      this.$nextTick(() => {
        // this.showOverlay = true;
        // this.showDetails = true;
        this.dialogVisible2 = true;
        this.articleContent = this.displayedData[index].memo;
        this.images.push({ url: this.displayedData[index].photo });
        this.number1 = this.images.length;
        console.log("11", this.images);
      });
    },
    hiddetails() {
      this.showOverlay = false;
      this.showDetails = false;
    },
    off() {
      this.showOverlay = false;
      this.showDetails = false;
    },
    reset() {
      this.value2 = "";
    },
    changeColor(number) {
      if (number === 11) {
        this.textColor1 = "aqua";
        this.cursorStyle1 = "pointer";
      }
    },
    restoreColor(number) {
      if (number === 11) {
        this.textColor1 = "aliceblue"; // 还原为原来的颜色
      }
    },
    async getDataFromAPI() {
      try {
        const res = await getpartyaction();
        console.log("活动", res.list);
        this.optiondj1 = {
          backgroundColor: "transparent",
          // color: [
          //   "rgba(255, 80, 34, 0.551)",
          //   "rgba(255, 10, 0, 0.651)",
          //   "rgba(255, 100, 0, 0.551)",
          //   "rgba(255, 50, 0, 0.551)",
          //   "rgba(255, 10, 0, 0.551)",
          //   "rgba(255, 120, 0, 0.568)",
          //   "rgba(255, 30, 0, 0.551)",
          //   "rgba(255, 150, 0, 0.551)",
          //   "rgba(255, 20, 0, 0.551)",
          //   "rgba(255, 0, 0, 0.551)",
          // ],
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            textStyle: {
              fontSize: 16, // 设置图例文字大小
            },
          },
          series: [
            {
              name: "活动类型分布",
              type: "pie",
              center: ["50%", "50%"],
              itemStyle: {
                borderRadius: 5,
              },
              labelLine: {
                lineStyle: {
                  width: 3,
                },
                length: 20,
                length2: 20,
              },
              label: {
                color: "#ffffff",
                show: true,
                fontSize: 16,
                formatter: function (params) {
                  return params.name + "\n" + "(" + params.value + ")";
                },
              },
              data: [
                { value: 1, name: "targetType" },
                { value: 2, name: "123" },
              ],
            },
          ],
        };
        this.optiondj2 = {
          backgroundColor: "transparent",
          title: {},
          grid: {
            top: "20%",
            bottom: "10%",
          },
          xAxis: {
            name: "（岁）",
            nameGap: 5,
            nameTextStyle: {
              fontSize: 12,
              color: "#fff",
            },
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisLabel: {
              color: "#fff",
              fontSize: 12,
              margin: 10,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
              },
            },
            z: 16,
          },
          yAxis: {
            name: "     （人）",
            type: "value",
            nameTextStyle: {
              fontSize: 12,
              color: "#ffffff",
            },
            axisLabel: {
              fontSize: 12,
              color: "#ffffff",
            },
            splitLine: {
              show: false, // 不显示网格线
            },
          },
          dataZoom: [
            {
              type: "inside",
            },
          ],
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: "line",
            },
          ],
        };
        this.renderChart(); // 渲染图表
      } catch (error) {
        // 错误处理
        console.error(error);
      }
    },
    renderChart() {
      const mychartdj1 = echarts.init(
        document.getElementById("chartdj1"),
        "dark"
      ); // 初始化echarts图表
      const mychartdj2 = echarts.init(
        document.getElementById("chartdj2"),
        "dark"
      ); // 初始化echarts图表
      mychartdj1.setOption(this.optiondj1); // 设置图表的配置项
      mychartdj2.setOption(this.optiondj2); // 设置图表的配置项
    },
  },
};
</script>
<style scoped>
.full {
  display: flex;
  flex-direction: column;
  width: 25rem;
  /* background-color: #e62f29; */
}
/*  */
.container {
  display: flex;
  justify-content: space-between;
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
}
/*  */
.full-secondtitle {
  display: flex;
  align-items: center;
  width: 11.5rem;
  height: 2.19rem;
  background-image: url("../assets/党组织标题背景.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0.2rem 1rem;
}
/*  */
.h1 {
  font-size: 1.4rem;

  font-weight: 600;
  color: #ffffff;
  margin-left: 1rem;
}
/*  */
.flex-container-dj {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
  flex-grow: 1;
  width: 25rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
  padding: 0.3rem 1rem;
}
.flex-container-dj2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
  flex-grow: 1;
  width: 25rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
  padding: 0.3rem 0rem;
}
.dj-boxitem {
  display: flex;
  /* flex-direction: row; */
  justify-content: space-between;
}
.flex-container-dj-box {
  background-image: url("../assets/总活动背景.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
}
.flex-dj-container-h3 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative; /* 设置相对定位 */
  flex-grow: 1;
  padding: 0.5rem 0rem;
}
.flex-dj-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 1rem;
  padding: 0.5rem 0rem;
}
.flex-dj-item {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-end;
  margin-left: 0.5rem;
}
.flex-dj-text1 {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-right: 0.5rem;
}
.flex-dj-text {
  display: flex;
  flex-direction: row;
}
.dj-text1 {
  display: flex;
  align-items: flex-end;
  font-size: 1.1rem;

  font-weight: 400;
  color: #ffffff;
}
.dj-text2 {
  font-size: 1.1rem;

  font-weight: 400;
  color: #ffffff;
}
.dj-h3 {
  font-size: 1rem;

  font-weight: 400;
  color: #ffffff;
  border: 0.1rem solid rgba(255, 255, 255, 0.805);
  border-radius: 0.2rem;
  position: absolute;
  padding: 0.1rem 0.5rem;
  top: 0.5rem;
  right: 0.5rem;
}
.dj-number {
  font-size: 2.25rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1;
  margin-right: 0.5rem;
  text-shadow: 0px 0px 4px #ff0000;
}
.dj {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 0.5rem;
  /* align-items: center; */
}

.chartdj1 {
  width: 24rem;
  height: 11rem;
}
.chartdj2 {
  width: 24rem;
  height: 13.5rem;
}
/* dangyuan */
.backg {
  display: flex;
  flex-direction: column;
  margin-left: 1rem;
  width: 70rem;
  height: 46rem;
  /* background-image: url("../assets/partybackground.png"); */
  background-size: 100% 100%;
  font-size: 1rem;
  position: relative;
}
.patyimg {
  display: flex;
  align-items: center;
  background-image: url("../assets/党员标志.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 21.75rem;
  height: 4.43rem;
  font-size: 2.1rem;
  font-weight: 600;
  text-align: center;
  color: #ffffff;
}
.patyimg span {
  margin-left: 1rem;
}
.backg-a {
  flex: 1;
  /* 查询添加用此css */
  margin: 0px 0rem 0 1rem;
}
.backg-b {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  /* 查询添加用此css */
  margin: 0px 0rem 0 1rem;
}

.paty-item1 {
  width: 100%;
  font-size: 1.95rem;
  font-weight: 600;
  margin-top: 2rem;
  color: #1faceb;
}
.paty-item2 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 2rem;
}
.paty-item3 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
  width: 100%;
}
.paty-item2-1 {
  font-size: 0.9rem;
  font-weight: 400;
  color: #88a0bf;
}
.paty-item2-2 {
  font-size: 0.9rem;
  font-weight: 400;
  color: #88a0bf;
}
.paty-item3-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 21rem;
}
.paty-item3-2 {
  margin-left: 2rem;
  width: 50rem;
  grid: 1;
  height: 25rem;
}
.paty-item3-2-1 {
  display: flex;
  text-align: left;
  font-size: 1rem;
  font-weight: 400;
  color: #ffffff;
  word-wrap: break-word;
  white-space: pre-line;
}
.swiper3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}
.paty-item3-1-1 {
  font-size: 0.9rem;
  font-weight: 400;
  color: #88a0bf;
}
.search-bar {
  color: rgb(255, 255, 255);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 1rem;
}
.search-bar input {
  /* background-color: transparent; */
  font: initial;
  font-size: 20px;
  margin-left: 20px;
  width: 120px;
  height: 30px;
  /* background-image: url("../assets/input.png"); */
  background-size: 100% 100%;
  background: rgba(31, 172, 235, 0.1);
  border: 1px solid #1faceb;
  border-radius: 4px;
}
.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.even {
  background-color: #f05e4b00;
}
.odd {
  background-color: #f05e4b10;
}
.table thead th {
  /* background-color: #f0f0f0; */
  padding: 1.5rem;
  /* padding-bottom: 50px; */
  color: #ff624e;
  /* border: 1px solid #ddd; */
}
.table tbody td {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1.5rem;
  text-align: center;
  color: rgb(255, 255, 255);
  /* border: 1px solid #ddd; */
}
.table tbody td a {
  color: #29abe2; /* 设置字体颜色为蓝色 */
  text-decoration: underline; /* 添加下划线 */
  cursor: pointer; /* 当鼠标悬停在详情列上时，显示手型光标 */
}
.padd {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.pagination {
  order: 2;
  margin-right: 3rem;
  margin-top: 0.5rem;
}
.pagination span {
  margin-left: 0.5rem;
  font-size: 1rem;
  border: 1px solid rgb(191, 191, 191);
  border-radius: 15%;
  color: rgb(255, 255, 255);
  cursor: pointer;
  padding: 4px 10px 4px 10px;
}
.pagination span.active {
  /* border: 1px solid transparent; */
  border: 1px solid #ff624e;
  border-radius: 15%;
  /* border-image: repeating-linear-gradient(
      -45deg,
      red,
      red 2px,
      white 2px,
      white 4px
    )
    1; */
  font-weight: bold;
}
.total-count {
  margin-left: 2rem;
  color: rgb(255, 255, 255);
  margin-top: 0.5rem;
  font-size: 1rem;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* details样式 */
.details {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  z-index: 1000;
}
.datetimer {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-size: 100% 100%;
  margin-left: 20px;
  width: 300px;
  height: 28px;
}
.search-c {
  width: 70px;
  height: 28px;
  color: rgb(255, 255, 255);
  /* background-image: url("../../assets/reset.png"); */
  /* background-size: 100% 100%; */
  background-color: #6c6c6c00;
  border: 1px solid #ffffff;
  margin-left: 20px;
}
</style>